<template>
	<view class="home-ltc">
		<!-- 热门矿机 -->
		<view class="re-h">
			<h3>{{$t('home.homeitc.itc')}}</h3>
			<text>{{$t('home.homeitc.more')}}></text>
		</view>
		
		<view class="re-dian">
			<!-- 下拉 -->
			<view style="width: 62%; margin-left: 30rpx; margin-bottom: 40rpx;">
			       <xfl-select 
			           :list="list"
			           :clearable="false"
			           :showItemNum="5" 
			           :listShow="false"
			           :isCanInput="false"  
			           :style_Container="'height: 76rpx; font-size: 1em;'"
			           :initValue="'电费:0.01/度'"
			           :selectHideType="'hideAll'"
					   @change="currt">
			       </xfl-select>
			   </view>
			  <!-- 计算器 -->
			  <view class="jsq" @click="gojsq">
				  <image src="../../static/imgs/js.png" mode=""></image>
				  <text>{{$t('home.four.Calculator')}}</text>
			  </view>
			 <view class="zlbs-list">
			 	<view class="zlbOne">
			 		<text>{{$t('home.homeNew.currency')}}</text>
			 		<text>{{$t('home.homeNew.algorithm')}}</text>
			 	</view>
			 	<view class="zlbTwo">
			 		<text>{{$t('home.homeNew.OreComPower')}}</text>
			 		<text>{{$t('home.homeNew.Currencyprice')}}</text>
			 	</view>
			 	<view class="zlbThree">
			 		<text><image src="../../static/imgs/gywm.png" mode="" class="zlbThreeImg"></image>{{$t('home.homeNew.DailyIncome')}}</text>
			 		<text>{{$t('home.homeNew.coin')}}</text>
			 	</view>
			 </view>
			  <scroll-view scroll-y="true">
			  	<view class="homes-list">
			  		<homes-kj v-for="(x,y) in kjs" :key="y" :list="x" type="矿机"></homes-kj>
			  	</view>
			  </scroll-view>
			  <view class="he"></view>
		</view>
	</view>
</template>

<script>
	// import list from '../../components/homes-list/homes-list.vue'
	import kj from '../../components/homes-kj/homes-kj.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	import api from '../../common/api.js'
	export default {
		name: 'home',
		components: {
			kj,
			xflSelect,
		},
		data() {
			return {
				
				list: [       //要展示的数据
				                '电费:0.01/度',
				                 '电费:0.02/度',
				                '电费:0.03/度',
				                '电费:0.04/度',
				                '电费:0.05/度',
				            ],
				df: [1, 2, 3, 4],
				heights:320,
				kjs:[
					{
						img: '../../static/imgs/banner.png',
						xinh: '心动',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SHAX',
						danw: '264.1',
						dianf:'1.3',
						bij: '222',
					},
					{
						img: '../../static/imgs/banner.png',
						xinh: '行动',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SH',
						danw: '264.1',
						dianf:'1.2',
						bij: '222',
					},
					{
						img: '../../static/imgs/banner.png',
						xinh: '行动',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SH',
						danw: '264.1',
						dianf:'1.2',
						bij: '222',
					},
					{
						img: '../../static/imgs/banner.png',
						xinh: '累',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SHAXX',
						danw: '264.1',
						dianf:'1.1',
						bij: '222',
					},
					{
						img: '../../static/imgs/banner.png',
						xinh: '累',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SHAXX',
						danw: '264.1',
						dianf:'1.1',
						bij: '222',
					},
					{
						img: '../../static/imgs/banner.png',
						xinh: '累',
						suanl: '26.33',
						gongh:'212',
						lir: '5555',
						biz: 'SHAXX',
						danw: '264.1',
						dianf:'1.1',
						bij: '222',
					},
				],
				token:''
			}
		},
		methods: {
			gojsq(){
				uni.navigateTo({
					url:'../../pages/profitCount/profitCount'
				})
			},
			currt(e){
			//	e.index  选中的下标
			// e.newVal
				console.log(e.newVal);
			}
		},
		created() {
			this.$api.sendRequest({
				url: api.HOT_ITC,
				success: res => {
					
				}
			});
		}
	}
</script>

<style>
	.he{
		width: 100%;
		height: 100rpx;
	}
.zlbs-list{
	width: 92%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	background-color: #FBF9FC;
}
.zlbOne{
	display: flex;
	flex-wrap: wrap;
	width: 124rpx;
	
}
.zlbTwo{
	display: flex;
	flex-wrap: wrap;
	width: 140rpx;
	
}
.zlbTwo>text:nth-of-type(2){
	margin: auto;
}
.zlbThree{
	display: flex;
	flex-wrap: wrap;
	width: 200rpx;
}
.zlbThreeImg{
	width: 30rpx;
	height: 30rpx;
	position: relative;
	top: 2rpx;
	left: -10rpx;
}
.zlbThree>text:nth-of-type(2){
	margin: auto;
}
scroll-view {
		width: 90vw;
		height: calc(42vh - 80rpx);
		margin: auto;
	}

.homes-list {
		width: 100vw;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		/* margin: -5px 0; */
	}
	.re-h {
		display: flex;
		flex-direction: row;
		position: relative;
	}
	
	.re-h>h3 {
		position: relative;
		left: 40rpx;
	}
	
	.re-h>text {
		position: absolute;
		right: 30rpx;
		color: #005FDB;
	}
	
	.re-dian {
		width: 100%;
		height: 100rpx;
		margin: 16rpx 0;
		position: relative;
	}
	
	
	.jsq{
		border: 2rpx solid black;
		width: 220rpx;
		height: 70rpx;
		border-radius: 10rpx;
		font-size: .8em;
		font-weight: 600;
		opacity: .6;
		position: absolute;
		right: 20rpx;
		top: 0;
	}
	.jsq>image{
		width: 40rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}
	.jsq>text{
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
	.homes-kj {
		margin: 10rpx 0;
		width: 100vw;
		height: 120rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		border-bottom: 4rpx solid #F3F3F3;
	}
</style>
